<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            margin: 0 auto;
            width: 800px;
        }
        table thead{
            background-color: aqua;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        //1.创建学生数据
        var obj = [{
            name:'张三',
            subject:'数学',
            score:100
        },{
            name:'里斯',
            subject:'语文',
            score:40
        },{
            name:'机器',
            subject:'英语',
            score:30
        },{
            name:'螺丝',
            subject:'政治',
            score:20
        },{
            name:'高博',
            subject:'屋里',
            score:10
        }]
        //2.根据obj数组 生成对应的行数
        var tbody = document.querySelector("tbody")
        for(var i = 0;i<obj.length;i++){
            var tr = document.createElement('tr')
            //3. 将每一行创建的tr 加入到 tbody中
            tbody.appendChild(tr)
            //4.先获取tbody下的所有tr 然后再根据数据写入td 单元格
            var tr = tbody.children
            for(var k in obj[i]){
                var td = document.createElement('td')
                td.innerHTML = obj[i][k]
                tr[i].appendChild(td)
            }
        }
        //5.创建删除单元格
        var trs = document.querySelector('tbody').querySelectorAll('tr')
        for(var i = 0;i<trs.length;i++){
            var del = document.createElement('td')
            del.innerHTML = "<a href='javascript:;'>删除</a>"
            trs[i].appendChild(del)
        }
        //6.点击删除 删除每一行数据
        var delbtn = document.querySelectorAll("a")
        for(let i = 0;i<delbtn.length;i++){
            delbtn[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>
</html>